<template>

  <div class="flex items-center justify-center min-h-screen bg-gray-100 bg-gradient-to-r from-blue-300 to-cyan-500 animate-bgGradient">
    <div class="card flex flex-col items-center justify-center p-6 shadow-lg rounded-lg">
      <div class="text-4xl font-bold text-center text-#17BAF9 mb-4">
        <img src="../img/饿了么图标.jpg" alt="饿了么图标" class="w-full h-auto max-h-32" />
      </div>
      <div class="text-2xl font-bold mb-4 text-#17BAF9">现在开始使用吧!</div>

      <div class="flex justify-between items-center gap-8">
        <h2 class="text-#17BAF9 transition-all duration-300 hover:scale-105 hover:text-#1796C6FF cursor-pointer" @click="goToLogin">登录</h2>
        <h2 class="text-#17BAF9 transition-all duration-300 hover:scale-105 hover:text-#1796C6FF cursor-pointer" @click="goToRegister">注册</h2>
      </div>

      <input type="text" placeholder="请输入手机号" class="text-sm block w-70 border border-gray-200 rounded py-3 px-4 hover:shadow" />
      <input type="password" placeholder="请输入密码" class="text-sm block w-70 border border-gray-200 rounded mb-3 py-3 px-4 hover:shadow" />

      <div class="items-start justify-start mb-4">
        <input type="checkbox" class="mr-2" />
        <label class="color-gray-500">记住我</label>
      </div>
      <button class="text-lg w-80 border-white bg-#17BAF9 hover:bg-blue-700 text-white font-bold py-3 px-3 rounded-full mb-3">
        登录
      </button>
      <div class="flex text-center gap-2 color-gray-300 mb-3">
        <div>联系我们</div>
        <div>|</div>
        <div>饿了就来饿了么</div>
      </div>
      <div class="flex text-center gap-2 color-gray-300">
        <div>2025软件工程实训</div>
        <div>|</div>
        <div>翟荟茹</div>
        <div>|</div>
        <div>20231120052</div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter();
    const goToRegister = () => {
      router.push('/register');
    };
    const goToLogin = () => {
      router.push('/login');
    };
    return {
      goToRegister,
      goToLogin
    };
    }
});

</script>

<style scoped>
.card {
  max-width: 400px;
  width: 100%;
  background-color: #fff;
}
@keyframes bgGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-bgGradient {
  animation: bgGradient 15s ease infinite;
}
</style>